/**
 * Created by GSY on 16/8/24.
 */
/**
 * Created by GSY on 16/8/17.
 */

var hammerMask_html;
var hammerBg_html;
var hammerBox_html;
var hammerPage_html;
var imgBig_html;
var hammerImgs_html = [];
var ticking_html = false;
var transform_html = {scale: 1, lastScale: 1, top: 0, left: 0, lastTop:0, lastLeft:0};


window.initHammer_html = function (mask,bg,box,page,img) {
  hammerMask_html = mask;
  hammerBg_html = bg;
  hammerBox_html = box;
  hammerPage_html = page;
  imgBig_html = img;

  //hammer init
  var mc_html = new Hammer.Manager(hammerBox_html);
  mc_html.add(new Hammer.Pan({ threshold: 10, pointers: 0 }));
//    mc_html.add(new Hammer.Swipe()).recognizeWith(mc_html.get('pan'));
  mc_html.add(new Hammer.Pinch({ threshold: 0 }));
  mc_html.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));

//hammer 监听
  mc_html.on('pan panend', function(ev) {
    transform_html.top = transform_html.lastTop + ev.deltaY;
    transform_html.left = transform_html.lastLeft + ev.deltaX;
    if(ev.type == 'panend') {
      if(Math.abs(transform_html.top) > shiftHeight) {
        if(transform_html.top > 0) {
          transform_html.top = shiftHeight;
        } else {
          transform_html.top = -shiftHeight;
        }
      }
      if(Math.abs(transform_html.left) > shiftWidth) {
        if(transform_html.left > 0) {
          transform_html.left = shiftWidth;
        } else {
          transform_html.left = -shiftWidth;
        }
      }
      transform_html.lastTop = transform_html.top;
      transform_html.lastLeft = transform_html.left;
      if(transform_html.scale <= 1) {
        transform_html.lastLeft = 0;
        transform_html.lastTop = 0;
      }
    }
    ticking_html = false;
    requestElementUpdate_html();
  });
//    mc_html.on('swipe', function(ev) {
//      if(ev.deltaX < 0 && (currentIndex_html < imgNumIndex_html)) {
//        //next
//        nextImg_html();
//      }  else if (ev.deltaX > 0 && (currentIndex_html > 0)){
//        //last
//        lastImg_html();
//      }
//
//    });
  var shiftWidth = 0;
  var shiftHeight = 0;
  mc_html.on('pinchstart pinchmove pinchend',function (ev) {
    //pinch scale
    if(ev.type == 'pinchstart') {
      shiftWidth = 0;
      shiftHeight = 0;
    } else if(ev.type == 'pinchmove') {
      transform_html.scale = transform_html.lastScale * ev.scale;
      if(transform_html.scale > 1) {
        shiftWidth = (transform_html.scale-1)/2*imgBig_html.offsetWidth;
        shiftHeight = (transform_html.scale-1)/2*imgBig_html.offsetHeight;
      }
      requestElementUpdate_html();

    } else if (ev.type == 'pinchend') {

      transform_html.scale = transform_html.lastScale * ev.scale;
      if(transform_html.scale > 0.7 && transform_html.scale < 1.3) {
        transform_html.scale = 1;
        transform_html.top = 0;
        transform_html.left = 0;
      }
      transform_html.lastScale = transform_html.scale;
      requestElementUpdate_html();
    }

  });
  mc_html.on('doubletap', function(ev) {
    if(transform_html.scale < 3 && transform_html.scale >= 1) {
      transform_html.scale = 3;
      transform_html.lastScale = 3;
      shiftWidth = (transform_html.scale-1)/2*imgBig_html.offsetWidth;
      shiftHeight = (transform_html.scale-1)/2*imgBig_html.offsetHeight;
    } else if(transform_html.scale < 1 || transform_html.scale >= 3) {
      transform_html.scale = 1;
      transform_html.lastScale = 1;
      transform_html.lastLeft = 0;
      transform_html.lastTop = 0;
      transform_html.left = 0;
      transform_html.top = 0;
      shiftWidth = 0;
      shiftHeight = 0;
    }
    requestElementUpdate_html();
  });
//hammer 监听结束
}

//hammer animation
function requestElementUpdate_html() {
  if(!ticking_html) {
    ticking_html = true;
    var value = [
      'translate('+transform_html.left+'px,'+transform_html.top+'px)',
      'scale(' + transform_html.scale + ', ' + transform_html.scale + ')'
    ];

    value = value.join(" ");
    imgBig_html.style.webkittransform = value;
    imgBig_html.style.transform = value;
  }

  setTimeout(function () {
    ticking_html = false;
  },17);
}

var currentIndex_html = 0;
var imgNumIndex_html = 0;

function lastImg_html() {
  if(currentIndex_html > 0) {
    currentIndex_html--;
    imgBig_html.src = "";
    imgBig_html.src = hammerImgs_html[currentIndex_html];
    hammerPage_html.innerHTML = (currentIndex_html+1)+"/"+(imgNumIndex_html+1);
  }
}
function nextImg_html() {
  if(currentIndex_html < imgNumIndex_html) {
    currentIndex_html++;
    imgBig_html.src = "";
    imgBig_html.src = hammerImgs_html[currentIndex_html];
    hammerPage_html.innerHTML = (currentIndex_html+1)+"/"+(imgNumIndex_html+1);
  }
}

window.showHammer_html = function(images,index) {

  transform_html = {scale: 1, lastScale: 1, top: 0, left: 0, lastTop:0, lastLeft:0};
  requestElementUpdate_html();
  hammerMask_html.style.display = "block";
  hammerBg_html.style.display = "block";

  hammerImgs_html = images;
  currentIndex_html = index;
  changecss_html('.blur-tag','-webkit-filter','blur(30px)');
  document.body.style.overflow = "hidden";
  imgBig_html.src = hammerImgs_html[index];
  imgNumIndex_html = hammerImgs_html.length - 1;
  hammerPage_html.innerHTML = (currentIndex_html+1)+"/"+(imgNumIndex_html+1);
}
function hideHammer_html(e) {
  if(e.target.nodeName == "IMG" | e.target.nodeName == "SPAN") {
    return;
  }
  changecss_html('.unblur-tag','-webkit-filter','none');
  document.body.style.overflow = "auto";
  hammerMask_html.style.display = "none";
  hammerBg_html.style.display = "none";
}

function changecss_html(theClass, element, value) {
  var cssRules;
  if (document.all) {
    cssRules = 'rules';
  } else if (document.getElementById) {
    cssRules = 'cssRules';
  }
  for (var S = 0; S < document.styleSheets.length; S++) {
    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
      if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
        document.styleSheets[S][cssRules][R].style[element] = value;
        return ;
      }
    }
  }
}
